<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(async function(){
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
      text: '车辆价格占比分布表',
      left: 'center',
      top: 'top',
      textStyle: {
        color: '#333',
        fontSize: 25
      }
    },
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: '车辆价格表',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      label: {
          show: true,
          position: 'outside', // 标签显示在扇区外部
          fontSize: 20, // 设置标签字体大小
          
        },
      data: [
        { value: 40, name: '劳斯莱斯' },
        { value: 38, name:  '保时捷Panamera' },
        { value: 32, name:  '奔驰S级'},
        { value: 30, name: '奥迪A8' },
        { value: 28, name: '宝马7系' },
        { value: 26, name: '雷克萨斯LS' },
        { value: 22, name:  '沃尔沃S90'},
        { value: 22, name: '捷豹XJ' },
        { value: 20, name:  '特斯拉Model S'},
        { value: 17, name: '小米suv' }
      ]
    }
  ]
};

option && myChart.setOption(option);
});


</script>

<template>
    <div id="main" style="width: 70vw; height: 70vh;"></div>
</template>

<style>

</style>